<script setup>
const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: "",
  },
  options: {
    type: Array,
    default: () => [],
  },
});
const emit = defineEmits(["update:modelValue"]);

const show = ref(false);
const value = ref([]);

const onConfirm = ({ selectedValues }) => {
  emit("update:modelValue", selectedValues[0]);
  show.value = false;
};

watch(
  () => props.modelValue,
  (val) => {
    value.value = [val];
  },
  {
    immediate: true,
  }
);

defineExpose({
  show() {
    show.value = true;
  },
});
</script>

<template>
  <van-popup
    v-model:show="show"
    closeable
    position="bottom"
    :style="{ height: 'fit-content' }"
  >
    <van-grid>
      <van-grid-item v-for="el of options" :key="el.value" :text="el.text">
        <div v-for="(e, i) of el.text.split('-')" :key="i">{{ e }}</div>
      </van-grid-item>
    </van-grid>
  </van-popup>
</template>
